<!DOCTYPE html>
<html>

<head>
    {include file="common/meta2" /}

    <link href="/assets/css2/css2.css" rel="stylesheet">
    <script type="text/javascript">
        document.addEventListener('plusready', function () {
            //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")

        });
    </script>
    <link rel="stylesheet" href="/assets/css2/layer.css" id="layui_layer_skinlayercss">
</head>

<body>
    <div class="head">
        <div class="return"><a href="javascript:history.back(-1)"><img src="/assets/img2/return.png"></a></div>
        <h1>任务列表</h1>
    </div>
    <div class="banner" style="background-image:url('/assets/img2/ship.png');background-size: cover; 
  background-repeat: no-repeat;  
  background-position: center;    ">
        <div class="text"></div>
        <div class="progress">
            <div class="proportion" style="display:none">10%</div>
            <div class="progress—box" style="display:none">
                <div class="bar" style="width:10%"></div>
            </div>
            <p style="color:#000;display:none">当前完成进度1/10</p>
        </div>
    </div>
    <div class="list">
        <h3>达人升级任务
            <!-- <button class="buts" style="     background: #fe6b01;
    border: solid 1px #fe6b01;
    color: #fff;margin-left: 30px" onclick="buts()">退出登陆</button> -->
        </h3>
        <div class="progress" style="padding:0px">
            <!--div class="proportion">10%</div-->
            <div class="progress—box">
                <div class="bar" style="width:10%"></div>
            </div>
            <p style="color:#000">当前完成进度1/10</p>
        </div>
        <ul>
            <li>
                <div class="text" style="padding:0px;flex:0;font-size:14px">1.</div>
                <div class="pic"><img src="/assets/img2/drrw_1.png"></div>
                <div class="text">洁</div>
                <button class="but completed">已完成</button>
            </li>
            <li>
                <div class="text" style="padding:0px;flex:0;font-size:14px">2.</div>
                <div class="pic"><img src="/assets/img2/drrw_1.png"></div>
                <div class="text">书香聚财福</div>
                <button class="but" onclick="send(10948,2)">去补单</button>
            </li>

            <li>
                <div class="text" style="padding:0px;flex:0;font-size:14px">3.</div>
                <div class="pic"><img src="/assets/img2/drrw_1.png"></div>
                <div class="text">橘</div>
                <button class="but" onclick="send(10919,3)">去补单</button>
            </li>

            <li>
                <div class="text" style="padding:0px;flex:0;font-size:14px">4.</div>
                <div class="pic"><img src="/assets/img2/drrw_1.png"></div>
                <div class="text">金子</div>
                <button class="but" onclick="send(10708,4)">去补单</button>
            </li>

            <li>
                <div class="text" style="padding:0px;flex:0;font-size:14px">5.</div>
                <div class="pic"><img src="/assets/img2/drrw_1.png"></div>
                <div class="text">枫杰</div>
                <button class="but" onclick="send(10700,5)">去补单</button>
            </li>

            <li>
                <div class="text" style="padding:0px;flex:0;font-size:14px">6.</div>
                <div class="pic"><img src="/assets/img2/drrw_1.png"></div>
                <div class="text">熹</div>
                <button class="but" onclick="send(10695,6)">去补单</button>
            </li>

            <li>
                <div class="text" style="padding:0px;flex:0;font-size:14px">7.</div>
                <div class="pic"><img src="/assets/img2/drrw_1.png"></div>
                <div class="text">瑷宝</div>
                <button class="but" onclick="send(10691,7)">去补单</button>
            </li>

            <li>
                <div class="text" style="padding:0px;flex:0;font-size:14px">8.</div>
                <div class="pic"><img src="/assets/img2/drrw_1.png"></div>
                <div class="text">勇哥</div>
                <button class="but" onclick="send(10685,8)">去补单</button>
            </li>

            <li>
                <div class="text" style="padding:0px;flex:0;font-size:14px">9.</div>
                <div class="pic"><img src="/assets/img2/drrw_1.png"></div>
                <div class="text">轻松创业</div>
                <button class="but" onclick="send(10682,9)">去补单</button>
            </li>

            <li>
                <div class="text" style="padding:0px;flex:0;font-size:14px">10.</div>
                <div class="pic"><img src="/assets/img2/drrw_1.png"></div>
                <div class="text">轻创优选小店</div>
                <button class="but" onclick="send(10672,10)">去补单</button>
            </li>


            <li>
                <div class="text" style="padding:0px;flex:0;font-size:14px"> </div>
                <div class="pic"> </div>
                <div class="text"> </div>
                <!-- <button class="but" style="width:100%" onclick="sendup(13795)">完成任务，申请成为达人</button> -->
            </li>

        </ul>
    </div>



    <script src="/assets/js2/jquery-3.3.1.min.js"></script>
    <script src="/assets/js2/layer.js"></script>
    <script>
        // 去补货
        function send(uid, ceng) {
            window.location.href = '/index/team/darentotask?pid=' + uid + '&ceng=' + ceng;
        }
        function buts() {
            window.location.href = '?m=index&c=logout';
        }
        function sendup(id) {

            $.post('?m=teamtt&c=upuser', {
                'id': id
            }, function (retmsg) {
                if (parseInt(retmsg.code) == 1) {
                    layer.msg(retmsg.msg);
                    window.location.href = '?m=index&c=login&logout_type=1';
                } else {
                    layer.msg(retmsg.msg);
                }
            }, 'json');
        }
    </script>
    <style>
        html,
        body {
            background: #f6f6f6;
        }

        body {
            padding-top: 76px;
        }

        .banner {
            background: #3578ff;
            padding: 20px;
        }

        .banner .text {
            text-align: center;
            font-size: 3.8rem;
            font-weight: bold;
            color: #fff;
            text-align: center;
            margin-top: 40px;
        }

        .progress—box {
            height: 15px;
            background: #fff;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
        }

        .banner .bar {
            background: url(/assets/img2/drrw_2.png);

            /* height: 100px; */
            position: absolute;
            height: 100%;
            left: 0;
            top: 0;
        }

        .progress p {
            color: #fff;
            margin-top: 10px;
            font-size: 1.4rem;
        }

        .progress {
            position: relative;
            padding: 77px 0 20px 0;
        }

        .proportion {
            background: #fff;
            font-size: 1.4rem;
            color: red;
            display: inline-block;
            padding: 5px 10px;
            position: relative;
            border-radius: 16px;
            position: absolute;
            top: 32px;
            right: 0;
        }

        .proportion::after {
            content: '';
            display: block;
            position: absolute;
            bottom: -20px;
            right: 15px;
            width: 0;
            height: 0;
            border-top: 5px solid #ffffff;
            border-right: 5px solid transparent;
            border-left: 6px solid transparent;
            border-bottom: 15px solid transparent;

        }

        .list {
            background: #f6f6f6;
            border-radius: 15px 15px;
            position: relative;
            top: -15px;
            padding: 20px 15px;
        }



        .progress—box {
            height: 15px;
            background: #fff;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
        }

        .bar {
            background: url(/assets/img2/drrw_2.png);

            /* height: 100px; */
            position: absolute;
            height: 100%;
            left: 0;
            top: 0;
        }

        .progress p {
            color: #fff;
            margin-top: 10px;
            font-size: 1.4rem;
        }

        .progress {
            position: relative;
            padding: 77px 0 20px 0;
        }

        .proportion {
            background: #fff;
            font-size: 1.4rem;
            color: red;
            display: inline-block;
            padding: 5px 10px;
            position: relative;
            border-radius: 16px;
            position: absolute;
            top: 32px;
            right: 0;
        }

        .proportion::after {
            content: '';
            display: block;
            position: absolute;
            bottom: -20px;
            right: 15px;
            width: 0;
            height: 0;
            border-top: 5px solid #ffffff;
            border-right: 5px solid transparent;
            border-left: 6px solid transparent;
            border-bottom: 15px solid transparent;

        }


        .list h3 {
            font-size: 1.8rem;
            line-height: 48px;
        }

        .list ul li {
            display: flex;
            align-items: center;
            background: #fff;
            padding: 4px 10px;
            margin-top: 10px;
            border-radius: 10px;
        }

        .list ul li img {
            width: 50;
        }

        .list ul li .but {
            line-height: 38px;
            width: 80px;
            text-align: center;
            border-radius: 20px;
            border: solid 1px #fe6b01;
            background: #fe6b01;
            color: #fff;
            font-size: 1.3rem;
        }

        .list ul li .completed {
            border: solid 1px #f5f5f5;
            background: #fff;
            color: #555;
        }

        .list ul li .text {
            padding: 0 8px;
            font-size: 1.3rem;
            flex: 3;
        }
    </style>

</body>

</html>